<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>bilibili</title>
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <!-- 头部 -->
    <header>
      <div class="logo">
        <img src="./image/logo.webp" alt="" />
      </div>
      <div class="nav-right">
        <img src="./image/sousuo.png" alt="" />
        <span>登录</span>
        <p>下载 App</p>
      </div>
    </header>
    <!-- 导航栏 -->
    <div class="nav">
      <ul>
        <li class="active"><span>首页</span></li>
        <li>动画</li>
        <li>番剧</li>
        <li>国创</li>
        <li>音乐</li>
        <li>舞蹈</li>
      </ul>
      <div class="xia">
        <img src="./image/xia.png" alt="" />
      </div>
    </div>
    <!-- 列表项 -->
    <div class="list">
      <div class="item">
        <img
          class="bg"
          src="./image/01.png"
          alt=""
        />
        <div class="info">
          <span class="left">
            <img src="./image/bofang.png" alt="" />
            <span>51.8万</span>
          </span>
          <span class="right">
            <img src="./image/pinglun.png" alt="" />
            <span>435</span>
          </span>
        </div>
        <span class="text"> 少年，这就是你所期望的长大吗？ </span>
      </div>
      <div class="item">
        <img class="bg" src="./image/01.png" alt="" />
        <div class="info">
          <span class="left">
            <img src="./image/bofang.png" alt="" />
            <span>227.9万</span>
          </span>
          <span class="right">
            <img src="./image/pinglun.png" alt="" />
            <span>4038</span>
          </span>
        </div>
        <span class="text"> 少年，这就是你所期望的长大吗？ </span>
      </div>
    </div>
    <div class="list">
      <div class="item">
        <img class="bg" src="./image/01.png" alt="" />
        <div class="info">
          <span class="left">
            <img src="./image/bofang.png" alt="" />
            <span>10.6万</span>
          </span>
          <span class="right">
            <img src="./image/pinglun.png" alt="" />
            <span>2935</span>
          </span>
        </div>
        <span class="text">
          少年，这就是你所期望的长大吗？
        </span>
      </div>
      <div class="item">
        <img class="bg" src="./image/01.png" alt="" />
        <div class="info">
          <span class="left">
            <img src="./image/bofang.png" alt="" />
            <span>85.6万</span>
          </span>
          <span class="right">
            <img src="./image/pinglun.png" alt="" />
            <span>1万</span>
          </span>
        </div>
        <span class="text"> 少年，这就是你所期望的长大吗？ </span>
      </div>
    </div>
    <div class="list">
      <div class="item">
        <img class="bg" src="./image/01.png" alt="" />
        <div class="info">
          <span class="left">
            <img src="./image/bofang.png" alt="" />
            <span>65.9万</span>
          </span>
          <span class="right">
            <img src="./image/pinglun.png" alt="" />
            <span>495</span>
          </span>
        </div>
        <span class="text"> 少年，这就是你所期望的长大吗？</span>
      </div>
      <div class="item">
        <img class="bg" src="./image/01.png" alt="" />
        <div class="info">
          <span class="left">
            <img src="./image/bofang.png" alt="" />
            <span>29.2万</span>
          </span>
          <span class="right">
            <img src="./image/pinglun.png" alt="" />
            <span>197</span>
          </span>
        </div>
        <span class="text"> 少年，这就是你所期望的长大吗？ </span>
      </div>
    </div>
    <div class="list">
      <div class="item">
        <img class="bg" src="./image/01.png" alt="" />
        <div class="info">
          <span class="left">
            <img src="./image/bofang.png" alt="" />
            <span>67.7万</span>
          </span>
          <span class="right">
            <img src="./image/pinglun.png" alt="" />
            <span>3322</span>
          </span>
        </div>
        <span class="text"> 少年，这就是你所期望的长大吗？ </span>
      </div>
      <div class="item">
        <img class="bg" src="./image/01.png" alt="" />
        <div class="info">
          <span class="left">
            <img src="./image/bofang.png" alt="" />
            <span>43.5万</span>
          </span>
          <span class="right">
            <img src="./image/pinglun.png" alt="" />
            <span>124</span>
          </span>
        </div>
        <span class="text"> 少年，这就是你所期望的长大吗？ </span>
      </div>
    </div>
    <!-- 提示框 -->
    <div class="tip">
      <img src="./image/logo.png" alt="" />
      <span> 打开App, 看你感兴趣的视频 </span>
    </div>
  </body>
</html>
